import React,{Component} from 'react';
import {Row,Col} from 'antd';
import './serviceContent.less';
import PropTypes from 'prop-types';
import Waypoint from 'react-waypoint';
import classNames from 'classnames';
const prefix = 'service-content';
class ServiceContent extends Component{
    state = {
        name:""
    };
    handleWaypointEnter = () =>{
        this.setState({
            name:"pulse"
        })
    };
    handleWaypointLeave = () =>{
        this.setState({
            name:"pulse"
        })
    };
    render(){
        let {title,source,background,titleColor} = this.props;
        let backStyle = (function () {
            if (background.match(/#[A-Z,a-z,0-p]+/g)) {
                return background;
            } else {
                return `url(${background}) no-repeat center`;
            }
        })();
        return(
            <div className={prefix} style={{background:backStyle}}>
                <div className={prefix+'-container'}>
                    <h1 style={{color:titleColor}}>
                        <i className="cover" style={{background:titleColor}}></i>
                        {title}
                    </h1>
                    <Row type="flex" justify="flex-start " align="top" gutter={20}>
                        <Waypoint
                            onEnter={this.handleWaypointEnter}
                            onLeave={this.handleWaypointLeave}
                        />
                        {source.map((value,index)=>{
                            return(
                                <Col key={index} className={classNames(prefix+'-col','animated',this.state.name)} style={{animationDelay: `${index/10}s` }}>
                                    <p className={prefix+'-index'}>{value.index}</p>
                                    <p className={prefix+'-content'}>
                                        <span>{value.content}</span>
                                    </p>
                                </Col>
                            )
                        })}
                    </Row>
                </div>
            </div>
        )
    }
}
export default ServiceContent;
ServiceContent.propTypes = {
  title:PropTypes.string.isRequired,
  source:PropTypes.array.isRequired,
    titleColor:PropTypes.string,
    background:PropTypes.string
};
ServiceContent.defaultProps = {
    titleColor:'#666',
    background:'#fff'
};